<template v-if="isvaild">
<div>
    <span>{{ num }}</span>
    <button @click="num++">+1</button>
</div>
</template>

<script>
    export default{
        data() {
            return {
                num:2,
            }
        },
        methods:{
            func(){
                console.log("this is func")
            }
        },
        beforeCreate() {
            console.log("this is beforeCreate");
        },
        created() {
            console.log("this is created")
            this.num=setInterval(()=>{this.num--},1000)
        },
        beforeMount()
        {
            console.log("this is beforeMount")
        },
        mounted() {
            console.log("this is mounted")
            document.querySelector('span').style.color='red'
        },
        beforeUpdate()
        {
            console.log(document.querySelector('span').innerHTML)
            console.log("this is beforeupdate")
        },
        updated() {
            console.log(document.querySelector('span').innerHTML)
            console.log("this is updated")
        },

        beforeUnmount()
        {
            clearInterval(this.num)
            console.log("this is beforeUnmount")
        },
        unmounted() {
            console.log("this is unmounted")
        },
        setup()
        {
            console.log("this is setup")
        },
    }
</script>

<style scoped>

</style>